<ng-container *ngIf="role.type !== RoleTypeEnum.union">
  <h2 class="text-xl"> {{ 'PAC.MODEL.AccessControl.RoleOverview' | translate: {Default: 'Role Overview'} }} </h2>

  <div>{{ role.name }}</div>

  <div>
    <label>{{ 'PAC.MODEL.AccessControl.DefaultAccess' | translate: {Default: 'Default Access'} }}: </label>
    <mat-button-toggle-group name="access" displayDensity="compact" ngmAppearance="outline" color="accent"
      [ngModel]="schemaGrantAccess$ | async"
      (change)="changeAccess($event)"
      (click)="$event.stopPropagation()">
      <mat-button-toggle [value]="Access.all">{{ 'PAC.MODEL.AccessControl.Access_all' | translate: {Default: 'All'} }}</mat-button-toggle>
      <mat-button-toggle [value]="Access.all_dimensions">{{ 'PAC.MODEL.AccessControl.Access_all_dimensions' | translate: {Default: 'All Dimensions'} }}</mat-button-toggle>
      <!-- <mat-button-toggle [value]="Access.custom">{{ 'PAC.MODEL.AccessControl.Access_custom' | translate: {Default: 'Custom'} }}</mat-button-toggle> -->
      <mat-button-toggle [value]="Access.none">{{ 'PAC.MODEL.AccessControl.Access_none' | translate: {Default: 'None'} }}</mat-button-toggle>
    </mat-button-toggle-group>
  </div>
</ng-container>

<ng-container *ngIf="role.type === RoleTypeEnum.union">
  <h2 class="text-xl"> {{ 'PAC.MODEL.AccessControl.UnionRole' | translate: {Default: 'Union Role'} }}</h2>

  <div>{{ role.name }}</div>

  <h3> {{ 'PAC.MODEL.AccessControl.RolesManage' | translate: {Default: 'Roles Manage'} }} </h3>
  <div class="pac-cdk-drop__list pac-table-container flex-1 h-1/2 overflow-auto rounded-lg border pb-4"
      cdkDropList
      (cdkDropListDropped)="dropRole($event)">
      <table mat-table [dataSource]="roleUsages$" style="min-width: 100%;" class="ngm-density__compact" >
  
        <!-- Drag indicator -->
        <ng-container matColumnDef="sort" sticky>
          <th mat-header-cell *matHeaderCellDef style="width: 3rem;"></th>
          <td mat-cell *matCellDef="let element">
            <mat-icon cdkDragHandle displayDensity="compact" class="pac-model-role-usage__drag">drag_indicator</mat-icon>
          </td>
        </ng-container>
  
        <!-- Name Column -->
        <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> {{ 'PAC.KEY_WORDS.Name' | translate: {Default: 'Name'} }} </th>
        <td mat-cell *matCellDef="let element">
            <a href [routerLink]="['../../', element.key, 'overview']">{{ element.name}}</a>
        </td>
        </ng-container>
        <ng-container matColumnDef="type">
            <th mat-header-cell *matHeaderCellDef> {{ 'PAC.KEY_WORDS.Type' | translate: {Default: 'Type'} }} </th>
            <td mat-cell *matCellDef="let element">
                <mat-radio-group [ngModel]="element.type" disabled class="ngm-radio-group__horizontal" displayDensity="compact">
                    <mat-radio-button >{{ 'PAC.MODEL.AccessControl.SingleRole' | translate: {Default: 'Single Role'} }}</mat-radio-button>
                    <!-- <mat-radio-button [value]="RoleTypeEnum.single">Single</mat-radio-button> -->
                    <mat-radio-button [value]="RoleTypeEnum.union">
                        {{ 'PAC.MODEL.AccessControl.UnionRole' | translate: {Default: 'Union Role'} }}
                    </mat-radio-button>
                </mat-radio-group>
            </td>
        </ng-container>
  
        <ng-container matColumnDef="action">
        <th mat-header-cell *matHeaderCellDef> {{ 'PAC.KEY_WORDS.Action' | translate: {Default: 'Action'} }} </th>
        <td mat-cell *matCellDef="let element">
  
            <button mat-icon-button displayDensity="compact" ngmAppearance="danger"
                (click)="removeRoleUsage(element.name)">
            <mat-icon>close</mat-icon>
            </button>
        </td>
        </ng-container>
    
        <tr mat-header-row *matHeaderRowDef="roleUsagesColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: roleUsagesColumns;" cdkDrag></tr>

        <tr class="mat-row" *matNoDataRow>
          <td class="mat-cell text-center" colspan="4">
            {{ 'PAC.KEY_WORDS.NoData' | translate: {Default: 'No data'} }}
          </td>
        </tr>
    </table>
  </div>
</ng-container>

<h3> {{ 'PAC.MODEL.AccessControl.UsersManage' | translate: {Default: 'Users Manage'} }} </h3>
<div class="flex flex-col justify-start items-stretch">
  <div class="flex justify-between items-center">
    <pac-inline-search [formControl]="searchControl"/>

    <div ngmButtonGroup>
      <button mat-flat-button displayDensity="cosy" color="primary" (click)="onAddUser()">
        {{ 'PAC.MENU.AddUsers' | translate: {Default: 'Add Users'} }}
      </button>
    </div>
  </div>
  <div class="pac-table-container mt-4 flex-1 overflow-auto rounded-lg border pb-4">
    <table mat-table [dataSource]="users$" class="ngm-density__compact w-full">
      <!-- Name Column -->
      <ng-container matColumnDef="user">
        <th mat-header-cell *matHeaderCellDef> {{ 'PAC.KEY_WORDS.User' | translate: {Default: 'User'} }} </th>
        <td mat-cell *matCellDef="let element">
          <pac-user-profile-inline [user]="element"></pac-user-profile-inline>
        </td>
      </ng-container>
  
      <ng-container matColumnDef="action">
        <th mat-header-cell *matHeaderCellDef> {{ 'PAC.KEY_WORDS.Action' | translate: {Default: 'Action'} }} </th>
        <td mat-cell *matCellDef="let element">
  
          <button mat-icon-button displayDensity="cosy" ngmAppearance="danger" (click)="removeUser(element.id)">
            <div class="flex justify-center items-center">
              <mat-icon>close</mat-icon>
            </div>
          </button>
        </td>
      </ng-container>
    
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

      <tr class="mat-row" *matNoDataRow>
        <td class="mat-cell text-center" colspan="4">
          {{ 'PAC.KEY_WORDS.NoData' | translate: {Default: 'No data'} }}
        </td>
      </tr>
    </table>
  </div>
  
</div>
